<template>
	<div class="issue-container">
		<!-- pc 端 -->
		<issue-pc-home v-if="isPc" />
		<!-- 移动端 -->
		<issue-mobile-home v-else />
	</div>
</template>

<script setup>
	const { isMobile, isDesktop, deviceType } = useDevice();
	const isPc = ref(!isMobile.value);
	// 监听屏幕视口宽度 observer
	if (import.meta.client) {
		const observer = new ResizeObserver(entries => {
			for (const entry of entries) {
				if (entry.target === document.body) {
					const width = window.innerWidth;
					if (width < 1024) {
						// 移动端
						isPc.value = false;
					} else {
						// pc 端
						isPc.value = true;
					}
				}
			}
		});
		observer.observe(document.body);
	}
</script>

<style scoped lang="scss">
	.issue-container {
		width: 100%;
		height: 100vh;
	}
</style>
